
import React, { Component } from 'react'
import "./My.scss"
import { Toast } from 'antd-mobile'
export default class My extends Component {
    btnClick = (params) => {
        // 退出
       Toast.info('退出成功',1,()=>{
        this.props.history.push("/login")
       })
    }
    CartClick=(params) => {
        // 购物车跳转
        this.props.history.push("/my/cart")
    }
    
    render() {
        return (
            <div className="my">
                {/* 头部内容开始 */}
                <div className="header">
                    <div className="header-box">
                        {/* 个人信息开始 */}
                        <div className="link">
                            {/* 头像开始 */}
                            <div className="user-wrap">
                                <img src="http://s11.mogucdn.com/mlcdn/5abf39/181130_6bf33fhed4cd69785l5caehba110c_100x100.jpg_160x160.jpg" alt="" className="user-img" />
                            </div>
                            {/* 头像结束 */}
                            {/* 姓名开始 */}
                            <div className="user-info">
                                <p className="user-name">1111111111111111</p>
                            </div>
                            {/* 姓名结束 */}
                            {/* 会员中心开始 */}
                            <div className="user-member"></div>
                            {/* 会员中心结束 */}
                        </div>
                        {/* 个人信息结束 */}
                    </div>
                </div>
                {/* 头部内容结束 */}
                {/* 板块开始 */}
                <div className="banner">
                    <div className="banner-box">
                        {/* 我的主页开始 */}
                        <div className="box">
                            <div className="img-wrap">
                                <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_7a9da7lh4a96lb1fl6b4gb854f3ji_75x75.png" alt="" />
                            </div>
                            <div className="text">我的主页</div>
                        </div>
                        {/* 我的主页结束 */}
                        {/* 消息开始 */}
                        <div className="box">
                            <div className="img-wrap">
                                <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_6f41b17399aha0flla6chjb0lhk47_75x75.png" alt="" />
                            </div>
                            <div className="text">消息</div>
                        </div>
                        {/* 消息结束 */}
                        {/* 收藏开始 */}
                        <div className="box">
                            <div className="img-wrap">
                                <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_31g4a5ebc8bj2f85cj4li8df89aab_75x75.png" alt="" />
                            </div>
                            <div className="text">收藏</div>
                        </div>
                        {/* 收藏结束 */}
                        {/* 关注开始 */}
                        <div className="box">
                            <div className="img-wrap">
                                <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_0k9k5gh362a1kbk87hha8ff1bek69_75x75.png" alt="" />
                            </div>
                            <div className="text">关注</div>
                        </div>
                        {/* 关注结束 */}
                    </div>
                </div>
                {/* 板块结束 */}
                {/* 购物车板块开始 */}
                <div className="carts">
                    <div className="carts-box">
                        {/* 左 */}
                        <div className="box-left" onClick={this.CartClick}><div className="left-text">购物车</div></div>
                        {/* 右 */}
                        <div className="box-right">
                            <div className="right-item">
                                <span className="item-left">卡券红包</span>
                                <div className="item-right">
                                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190819_82kf4j7kdldbf0654hf987dk24kj4_10x18.png" alt="" />
                                </div>
                            </div>
                            <div className="right-item">
                                <span className="item-left">补贴保障</span>
                                <div className="item-right">
                                    退货补运费
                                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190819_82kf4j7kdldbf0654hf987dk24kj4_10x18.png" alt="" />
                                </div>
                            </div>
                            <div className="right-item">
                                <span className="item-left">我的钱包</span>
                                <div className="item-right">
                                    白付美在这
                                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190819_82kf4j7kdldbf0654hf987dk24kj4_10x18.png" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 购物车板块结束 */}
                {/* 订单板块开始 */}
                <div className="order">
                    <div className="order-box">
                        <div className="box-top">
                            <div className="top-left">我的订单</div>
                            <div className="top-right">
                                全部
                                <img src="https://s10.mogucdn.com/mlcdn/c45406/190819_82kf4j7kdldbf0654hf987dk24kj4_10x18.png" alt="" />
                            </div>
                        </div>
                        <div className="box-contents">
                            {/* 待付款 */}
                            <div className="contents">
                                <div className="img">
                                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_0ig16599k9l4f80g59cbkc6bcadid_75x75.png" alt="" />
                                </div>
                                <div>待付款</div>
                            </div>
                            {/* 待发货 */}
                            <div className="contents">
                                <div className="img">
                                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_5j02c44liecec503kdldjbh72hca8_75x75.png" alt="" />
                                </div>
                                <div>待发货</div>
                            </div>
                            {/* 待收货 */}
                            <div className="contents">
                                <div className="img">
                                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_56bd5eg3f4h47g2l1042436dc2950_75x75.png" alt="" />
                                </div>
                                <div>待收货</div>
                            </div>
                            {/* 评价 */}
                            <div className="contents">
                                <div className="img">
                                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_8af1b27cfaed15fllab4j3hffh7h8_75x75.png" alt="" />
                                </div>
                                <div>评价</div>
                            </div>
                            {/* 售后退款 */}
                            <div className="contents">
                                <div className="img">
                                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_18db4je44bd6ej8ajg0l1950ia5ih_75x75.png" alt="" />
                                </div>
                                <div>售后退款</div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 订单板块结束 */}
                {/* 设置板块开始 */}
                <div className="order">
                    <div className="order-box">
                        <div className="box-top">
                            <div className="top-left">我的设置</div>
                        </div>
                        <div className="box-contents">
                            {/* 签到 */}
                            <div className="contents">
                                <div className="img">
                                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_6f13a0l26fcfcgkhei88f8248024k_75x75.png" alt="" />
                                </div>
                                <div>签到</div>
                            </div>
                            {/* 大姨妈 */}
                            <div className="contents">
                                <div className="img">
                                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_8444j6413ccf1b00hb923a7l491ad_75x75.png" alt="" />
                                </div>
                                <div>大姨妈</div>
                            </div>
                            {/* 客服 */}
                            <div className="contents">
                                <div className="img">
                                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_54cd4b12ef09174hf1jkblbi69i2c_75x75.png" alt="" />
                                </div>
                                <div>客服</div>
                            </div>
                            {/* 达人中心 */}
                            <div className="contents">
                                <div className="img">
                                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_10lcah52ick650jc36hgg2kafkj5f_75x75.png" alt="" />
                                </div>
                                <div>达人中心</div>
                            </div>
                            {/* 运势 */}
                            <div className="contents">
                                <div className="img">
                                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190815_2cf791h231122lgi983a043h0a6ij_75x75.png" alt="" />
                                </div>
                                <div>运势</div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 设置板块结束 */}
                {/* 退出登录 */}
                <button className="btn" onClick={this.btnClick}>退出登录</button>
            </div>
        )
    }
}
